<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
	<jsp:include page="/header"></jsp:include>


	<div class="shop-area">
		<div class="container">
			<div class="row">
				<div class="col-lg-3">
					<aside class="sidebar-widget mt-50">
						<div class="shop-sidebar-category">
							<div class="sidebar-title">
								<h4 class="title-shop">首页</h4>
							</div>
							<ul class="sidebar-category-expand">
								<c:forEach items="${productclass }" var="pc">
									<li class="categories-hover-right"><a href="${pc.curl }">${pc.cname }</a>
									</li>
								</c:forEach>
							</ul>
						</div>
						<div class="widget_inner widget-background mt-50">
							<div class="widget_list widget_filter">
								<div class="sidebar-title">
									<h4 class="title-shop">按价格筛选</h4>
								</div>
								<form action="#">
									<div id="slider-range"></div>
									<button type="submit">过滤</button>
									<input type="text" name="text" id="amount" />
								</form>
							</div>
							<div class="widget_list widget_categories mt-20">
								<div class="sidebar-title">
									<h4 class="title-shop">分类目录</h4>
								</div>
								<ul>
									<li><input type="checkbox"> <a href="#">分类一 </a> <span
										class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">分类二</a> <span
										class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">分类三 </a> <span
										class="checkmark"></span></li>
								</ul>
							</div>
							<div class="widget_list widget_categories mt-20">
								<div class="sidebar-title">
									<h4 class="title-shop">手机配件</h4>
								</div>
								<ul>
									<li><input type="checkbox"> <a href="#">CPU</a> <span
										class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">主板 </a> <span
										class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">电池 </a> <span
										class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">转接头</a> <span
										class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">内存卡</a> <span
										class="checkmark"></span></li>
								</ul>
							</div>
							<div class="widget_list widget_categories mt-20">
								<div class="sidebar-title">
									<h4 class="title-shop">按颜色选择</h4>
								</div>
								<ul>
									<li><input type="checkbox"> <a href="#">黑色 (6)</a>
										<span class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#"> 蓝色
											(8)</a> <span class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">棕色
											(10)</a> <span class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#"> 绿色
											(6)</a> <span class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">粉色 (4)</a>
										<span class="checkmark"></span></li>
									<li><input type="checkbox"> <a href="#">白色 (2)</a>
										<span class="checkmark"></span></li>
								</ul>
							</div>
						</div>
						<!-- Shop Banner Start -->
						<div class="single-banner text-center mt-50 mb-30">
							<a href="#"><img src="assets/images/banner/shop-banner-2.jpg"
								alt="" class="img-fluid"></a>
						</div>
						<!-- Shop Banner End -->
					</aside>
				</div>
				<div class="col-lg-9 order-first order-lg-last">
					<!-- Shop Banner Start -->
					<div class="single-banner mt-50 mb-50">
						<a href="#"><img src="assets/images/banner/shop-banner-1.jpg"
							alt="" class="img-fluid"></a>
					</div>
					<!-- Shop Banner End -->
					<!-- Shop Toolbar Start -->
					<div class="toolbar-shop mb-50">
						<div class="shop_toolbar_btn">
							<button data-role="grid_3" class="btn-grid-3 active"></button>
							<button data-role="grid_list" class="btn-list"></button>
						</div>
						<div class="page-amount">
							<p>有12个产品</p>
						</div>
						<div class="nice-select select-option">
							<select name="select">
								<option value="1">按名称排序</option>
							</select>
						</div>
					</div>
					<!-- Shop Toolbar End -->
					<!-- Shop Wrapper Start -->
					<div class="row shop-wrapper grid_3">
						<c:forEach items="${phone }" var="p">
							<div class="col-lg-4 col-md-4 col-sm-6 col-12 mb-20">
								<!-- Single-Product-Start -->
								<form action="#" class="layui-form" onsubmit="false">
									<div class="item-product pt-0">
										<div class="product-thumb">
											<a href="${p.PskipUrl }"> <img src="${p.Purl }" alt=""
												class="img-fluid">
											</a>
											<div class="action-link">
												<a class="quick-view same-link" href="#" title="快速浏览"
													data-toggle="modal" data-target="#modal_box"
													data-original-title="quick view"><i
													class="zmdi zmdi-eye zmdi-hc-fw"></i></a> <a
													class="compare-add same-link" href="compare.html"
													title="加入比较"><i class="zmdi zmdi-refresh-alt"></i></a>
													<a class="wishlist-add same-link" href="" lay-submit
                          lay-filter="form" type="submit" title="加入愿望清单"><i
                          class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
											</div>
										</div>
										<div class="product-caption">
											<div class="product-name">
												<a href="${p.PskipUrl }">${p.Pname }</a>
											</div>
											<div class="rating">
												<span class="yellow"><i class="fa fa-star"></i></span> <span
													class="yellow"><i class="fa fa-star"></i></span> <span
													class="yellow"><i class="fa fa-star"></i></span> <span
													class="yellow"><i class="fa fa-star"></i></span> <span
													class="yellow"><i class="fa fa-star"></i></span>
											</div>
											<div class="price-box">
												<span class="regular-price">${p.Pprice }</span>
											</div>
											<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${p.Pid }" name="Pid" id="Pid"  >
											<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${p.Sid }" name="Sid" id="Sid"  >
											<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${p.Pprice }" name="Pprice" id="Pprice"  >
											<div class="cart">
												<div class="add-to-cart">
													<a type="submit" class="cart-plus" lay-submit
														lay-filter="formDemo" title="加入购物车"><i
														class="zmdi zmdi-shopping-cart-plus zmdi-hc-fw"></i></a>
												</div>
											</div>
										</div>
										<div class="grid-list-caption align-items-center">
											<div class="product-name">
												<a href="${p.PskipUrl }">${p.Pname }</a>
											</div>
											<div class="rating">
												<span class="yellow"><i class="fa fa-star"></i></span> <span
													class="yellow"><i class="fa fa-star"></i></span> <span
													class="yellow"><i class="fa fa-star"></i></span> <span
													class="yellow"><i class="fa fa-star"></i></span> <span
													class="yellow"><i class="fa fa-star"></i></span>
											</div>
											<div class="price-box">
												<span class="regular-price">${p.Pprice }</span>
											</div>
											<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${p.Pid }" name="Pid" id="Pid"  >
											<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${p.Sid }" name="Sid" id="Sid"  >
											<input required="" hidden="hidden" autocomplete="off" class="layui-input" type="text" lay-verify="required" value="${p.Pprice }" name="Pprice" id="Pprice"  >
											<p>${p.Pdescribe }</p>
											<div class="text-available">
												<p>
													<strong>库存：</strong><span>${p.Srepertory }件</span>
												</p>
											</div>
											<div class="action-link">
												<a class="quick-view same-link" href="#" title="快速浏览"
													data-toggle="modal" data-target="#modal_box"
													data-original-title="quick view"><i
													class="zmdi zmdi-eye zmdi-hc-fw"></i></a> <a
													class="compare-add same-link" href="compare.html"
													title="加入比较"><i class="zmdi zmdi-refresh-alt"></i></a> <a class="wishlist-add same-link" href="" lay-submit
                          lay-filter="form" type="submit" title="加入愿望清单"><i
                          class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i></a>
											</div>
											<div class="cart-list-button">
												<a type="submit" lay-submit lay-filter="formDemo"
													class="cart-btn">加入购物车</a>
											</div>
										</div>
									</div>
									<!-- Single-Product-End -->
								</form>
							</div>
						</c:forEach>
					</div>
					<!-- Shop Wrapper End -->
					<!-- Shop Toolbar Start -->
					<div class="toolbar-shop toolbar-bottom">
						<div class="page-amount">
							<p>显示30个结果中的1-12个</p>
						</div>
						<div class="pagination">
							<ul>
								<li class="previous"><a href="#"><i
										class="fa fa-angle-left"></i> 上一个</a></li>
								<li class="current">1</li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li class="next"><a href="#">下一个 <i
										class="fa fa-angle-right"></i></a></li>
							</ul>
						</div>
					</div>
					<!-- Shop Toolbar End -->
				</div>
			</div>
		</div>
	</div>
	<!--======================
    Shop area End
    ==========================-->

	<!--===================
     footer area start 
    ===================-->





	<!--===================
     footer area start 
    ===================-->
	<footer class="mt-30">
		<!-- Newslatter area start -->
		<div class="newsletter-group">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-lg-6 col-12">
						<div class="newsletter-inner d-flex align-items-center">
							<i class="fa fa-envelope-open-o"></i>
							<div class="newsletter-title">
								<h1 class="sign-title">注册我们的通讯</h1>
								<p>获取有关我们最新商店和特惠信息的电子邮件更新。</p>
							</div>
						</div>
					</div>
					<div class="col-lg-6 col-12">
						<div class="newsletter-box">
							<form id="mc-form" class="mc-form">
								<input type="email" id="mc-email" class="email-box"
									placeholder="输入你的电子邮箱" name="EMAIL">
								<button id="mc-submit" class="newsletter-btn" type="submit">订阅</button>
							</form>
							<!-- mailchimp-alerts Start -->
							<div class="mailchimp-alerts text-centre">
								<div class="mailchimp-submitting"></div>
								<!-- mailchimp-submitting end -->
								<div class="mailchimp-success text-success"></div>
								<!-- mailchimp-success end -->
								<div class="mailchimp-error text-danger"></div>
								<!-- mailchimp-error end -->
							</div>
							<!-- mailchimp-alerts end -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Newslatter area End -->

		<!-- Footer Top Start -->
		<div class="footer-top mt-50 mb-40">
			<div class="container">
				<div class="row">
					<div class="col-lg-4">
						<div class="footer-single-widget">
							<div class="footer-logo mb-40">
								<a href="index"><img
									src="assets/images/logo/pos-circle-logo.jpg" alt=""></a>
							</div>
							<div class="widget-body">
								<div class="widget-address mt-30 mb-20">
									<p>
										<strong>地址:</strong>新乡市，红旗区，新乡职业技术学院
									</p>
									<p>
										<strong>联系电话:</strong> (800) 123 456 - (800) 123 456.
									</p>
									<p>
										<strong>电子邮箱:</strong> support@circleshop.com
									</p>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-8">
						<div class="row">
							<div class="col-lg-3 col-md-3 col-6">
								<div class="widgets_container">
									<h6>信息</h6>
									<div class="footer_menu">
										<ul>
											<li><a href="#">隐私政策</a></li>
											<li><a href="#">条款及细则</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-6">
								<div class="widgets_container">
									<h6>我的账户</h6>
									<div class="footer_menu">
										<ul>
											<li><a href="#">我的帐户</a></li>
											<li><a href="#">心愿单</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-6">
								<div class="widgets_container">
									<h6>快速找到</h6>
									<div class="footer_menu">
										<ul>
											<li><a href="#">历史悠久</a></li>
											<li><a href="#">新闻快报</a></li>
										</ul>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-3 col-6">
								<div class="widgets_container">
									<h6>客户服务</h6>
									<div class="footer_menu">
										<ul>
											<li><a href="#">网站地图</a></li>
											<li><a href="#">联系我们</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Footer Top End -->
	</footer>
	<!--===================
     footer area end 
    ===================-->


	<!-- Use the minified version files listed below for better performance and remove the files listed above -->
	<script src="assets/js/vendor/vendor.min.js"></script>
	<script src="assets/js/plugins/plugins.min.js"></script>

	<!-- Main JS -->
	<script src="assets/js/main.js"></script>
	<script>
		//Demo
		layui.use('form', function() {
			var form = layui.form;
			var $ = layui.jquery;
			//监听提交心愿单
		      form.on('submit(form)', function(data) {
		        var d = data.field;//表单中的数据，定义一个对象来接收
		        var url = '/shoppingsix/wishlist_add';
		        $.post(url, d, function(data) {
		          if (data.count > 0) {
		            console.log('添加成功');
		            /* layer.msg('添加成功');//在页面显示添加成功 */
		            window.location.href = "wishlist";
		          }
		        }, "json");
		        return false;
		      });
			//监听提交
			form.on('submit(formDemo)', function(data) {
				var d = data.field;//表单中的数据，定义一个对象来接收
				var url = '/shoppingsix/shopping-cart_add';
				$.post(url, d, function(data) {
					if (data.code!=201) {
						console.log(data.code);
					if(data.count>0){
						console.log('添加成功');
						/* layer.msg('添加成功');//在页面显示添加成功 */
						window.location.href = "shopping-cart";
					}else{
						layer.msg(data.data);
					}
				}else{
					console.log("请登录");
					window.location.href = "login_car.jsp";
				}
				}, "json");
				return false;
			});
		});
	</script>
</body>
</html>